Free Kindling is a website that provides links to free educational resources on the arts, technology and business. Initially the 'Kindling' part of the title related to the heavy focus on Amazon Kindle books. However over time I began to like the idea of 'burning' as a metaphor for learning; and that the free educational resources were what fuelled the learning experience.

This was my first real responsive 'mobile first' designed web project. It was a weird thing to give up the illusion of pretending you have a particular set of physical dimensions to work with. Starting small (mobile) first simplified the process. But as I worked on the larger variations interesting questions came up. If there's a lot of whitespace, do you fill it? And if so, with what? And is that thing you add adding to the user experience? (And if it is, why is it not in the mobile version?)

 

I played around with what I had. In some places I've set up special span tags that hide/show text depending on the available space. It seemed natural enough to explicitly state "Free Technology eBooks" where space allowed, but on smaller displays I ditched the word "Free" since I lacked the space and I would hope people would already understand the nature of the website's content by that point.

 

There's always the danger of hiding something at a particular screen dimension that a user might want to see or use. Part of the way I tried to deal with this was to give users the ability to show/hide content through checkboxes via some jQuery code. In the spirit of progressive enhancement features that rely on JavaScript are disabled by default (at the HTML level) and then enabled by JavaScript if it is present.

HTML and CSS

Responsive Design

PHP and MySQL

JavaScript and jQuery

Illustration with Adobe Illustrator and SVG format

 

FitVid.js (Thanks Chris and Paravel)

Google Webfonts [Open Sans 400/600/800, Open Sans Condensed 300]